<template>
  <el-button :plain="true" @click="openMsg">打开消息提示</el-button>
  <el-button :plain="true" @click="openVn">VNode</el-button>
  <el-button plain @click="open1" >可自动关闭</el-button>
  <el-button type="text" @click="openMsgBox">点击打开信息框</el-button>
</template>

<script>
import { reactive, toRefs, getCurrentInstance, h } from 'vue'

export default {
  setup () {
    const { ctx } = getCurrentInstance()
    const state = reactive({
      count: 0
    })
    const openMsg = () => {
      ctx.$message({
        dangerouslyUseHTMLString: true, // message 就会被当作 HTML 片段处理
        message: '<strong>恭喜你，这是一条 <i>成功</i> 消息</strong>',
        type: 'success',
        showClose: true, // 设置为可关闭警告框
        center: true// 文字居中
      })
    }
    const openVn = () => {
      ctx.$message({
        message: h('p', null, [
          h('span', null, '内容可以是 '),
          h('i', { style: 'color: teal' }, 'VNode')
        ])
      })
    }
    const openMsgBox = () => {
      ctx.$alert('这是一段内容', '标题名称', {
        confirmButtonText: '确定',
        callback: action => {
          ctx.$message({
            type: 'info',
            message: `action: ${action}`
          })
        }
      })
    }
    const open1 = () => {
      ctx.$notify({
        title: '确认删除',
        message: h('i', { style: 'color: teal' }, '请确认！！！'),
        position: 'bottom-right' // 定义弹出位置
        // offset: 100 // 弹出偏移位置
      })
    }
    return {
      ...toRefs(state),
      openMsg,
      openVn,
      openMsgBox,
      open1
    }
  }
}
</script>
